<template>
	<view class="container">
		<u-navbar :title="$t('my.transaction_record')" placeholder bgColor="#0fbc96" leftIconColor="#FFFFFF"
			titleStyle="color: #FFFFFF" autoBack>
		</u-navbar>

		<view class="content">
			<view class="item-list">
				<view v-for="(item,index) in recordsList" :key="index" class="transaction-records"
					:class="{ 'border': index < recordsList.length - 1}">
					<view class="flex align-center flex-w">
						<image class="coin-icon" src="" mode="" />
						<view class="flex flex-direction">
							<text class="font-32">WBTC</text>
							<view class="font-24 mar-top-10 color_929292">2024-04-28 19:20:02</view>
						</view>
					</view>
					<image class="undulate" :src="`/static/image/${index == 0 ? 'rise' : 'decline'}.png`" mode="" />
					
					<view class="text-right flex flex-direction">
						<text class="font-24" :style="{color: index === 0 ? '#01b176' : '#ff4545'}">0.36655</text>
						<text class="font-26">收益</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const recordsList = ref(['','','','']);
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx 25rpx 40rpx 25rpx;
		box-sizing: border-box;

		.item-list {
			border-radius: 20rpx;
			background: #ffffff;
			font-size: 3.3816vw;
			box-sizing: border-box;

			.transaction-records {
				padding: 0 25rpx;
				height: 136rpx;
				display: flex;
				align-items: center;
				
				.coin-icon {
					width: 56rpx;
					height: 56rpx;
				}
			}

			.border {
				border-bottom: 1rpx solid #f0f0f0;
			}
			
			.undulate {
				width: 28rpx;
				height: 28rpx;
				margin-right: 60rpx;
			}
		}
	}
</style>